<template>
  <div class="account">
    <van-cell title="密码修改" @click="visible = true" is-link />
    <van-button class="logout" type="primary" size="large" @click="logout"
      >退出登录</van-button
    >
    <v-dialog
      class="modal-pass"
      v-model:show="visible"
      @confirm="handleOk"
      title="修改密码"
      show-cancel-button
    >
      <van-cell-group>
        <van-field
          v-model="oldPass"
          label="原密码"
          clearable
          placeholder="请输入原密码"
        />
        <van-field
          v-model="newPass"
          label="新密码"
          clearable
          placeholder="请输入新密码"
        />
        <van-field
          v-model="newPass2"
          label="确认密码"
          clearable
          placeholder="再次输入确认"
        />
      </van-cell-group>
    </v-dialog>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import { post } from '@/utils/request'
import { useStore } from 'vuex'
export default {
  name: 'Account',

  setup() {
    const store = useStore()
    const router = useRouter()
    const state = reactive({
      visible: false,
      oldPass: '',
      newPass: '',
      newPass2: ''
    })

    // 修改密码
    const handleOk = async () => {
      if (state.newPass != state.newPass2) {
        Toast.fail('新密码不一致')
        return
      }
      const { data } = post('/user/modify_pass', {
        old_pass: state.oldPass,
        new_pass: state.newPass,
        new_pass2: state.newPass2
      })

      Toast.success('修改成功')
    }

    // 退出登录
    const logout = async () => {
      await store.dispatch('logout')
      router.replace('/login')
    }

    return {
      ...toRefs(state),
      handleOk,
      logout
    }
  }
}
</script>

<style lang="less">
.account {
  min-height: 100%;
  background-color: #f5f5f5;

  .logout {
    display: block;
    margin: 0 auto;
    width: 90%;
    margin-top: 20px;
    background-color: var(--text-color5);
    border-color: var(--text-color5);
  }
  .modal-pass {
    .v-dialog__header {
      padding: 10px 0;
    }
    .v-dialog__content {
      .van-cell-group {
        padding: 20px;
      }
    }
  }
}
</style>
